Extensions

Press shift + S to search API reference.

Interface

AllStylesProps

View source

In the Blocks SDK, UI components can be styled via a set of supported style props. These style props (e.g. width, margin, backgroundColor) take a subset of supported CSS properties and expose them as explicit React component props.

Here is an example that uses the Box layout primitive:

<Box
display="flex"
alignItems="center"
justifyContent="center"
width="200px"
height="200px"
>
Hello world
</Box>

This is equivalent to the following:

<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '200px',
height: '200px',
}}>
Hello world
</div>

Style props also provide access to Airtable's design tokens, including our color palette, typographic scale, and spacing scale. This allows developers to quickly build UIs that adhere to the Airtable design system. As an example, numbers passed to the margin or padding props are converted to our spacing scale, based on powers of two.

<Box margin={0} /> // margin: 0;
<Box margin={1} /> // margin: 4px;
<Box margin={2} /> // margin: 8px;
<Box margin={3} /> // margin: 16px;
// Negative margins are also supported
<Box margin={-1} /> // margin: -4px;
<Box margin={-2} /> // margin: -8px;
<Box margin={-3} /> // margin: -16px;

To override this behavior and use a specific pixel value (or other units, like percentages or ems/rems), you may pass a string like 200px. However, this is generally discouraged, as these values don't adhere to the same grid/vertical rhythm as the rest of our components.

As another example, style props like backgroundColor and textColor accept color names that ensure visual consistency with the Airtable styleguide. Like the spacing scale, you can always opt out by passing in hex/rgb/hsl strings directly.

<Box backgroundColor="blue" textColor="white" />

Each component in our UI library exposes a particular subset of style props, documented as style prop interfaces. For more information, refer to the API reference for the specific component that you're trying to use.

All supported style props:

alignContentOptionalResponsiveProp<AlignContentProperty>

Sets the alignment of a flex container's lines when there is extra space in the cross-axis. This property has no effect on a single-line flex container.

alignItemsOptionalResponsiveProp<AlignItemsProperty>

Sets the alignment of flex items on the cross-axis of a flex container.

alignSelfOptionalResponsiveProp<AlignSelfProperty>

Aligns flex items of the current flex line, overriding the alignItems value.

backgroundColorOptionalResponsiveProp<BackgroundColorProperty>

Sets the background color of an element.

borderOptionalResponsiveProp<BorderProperty<Length>>

Sets an element's border. It's a shorthand for borderWidth, borderStyle, and borderColor.

borderBottomOptionalResponsiveProp<BorderBottomProperty<Length>>

Sets the width, line style, and color for an element's bottom border.

borderColorOptionalResponsiveProp<BorderColorProperty>

Sets the color of all sides of an element's border.

borderLeftOptionalResponsiveProp<BorderLeftProperty<Length>>

Sets the width, line style, and color for an element's left border.

borderRadiusOptionalResponsiveProp<BorderRadiusProperty<Length>>

Rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

borderRightOptionalResponsiveProp<BorderRightProperty<Length>>

Sets the width, line style, and color for an element's right border.

borderStyleOptionalResponsiveProp<BorderStyleProperty>

Sets the line style for all four sides of an element's border.

borderTopOptionalResponsiveProp<BorderTopProperty<Length>>

Sets the width, line style, and color for an element's top border.

borderWidthOptionalResponsiveProp<BorderWidthProperty<Length>>

Sets the widths of all four sides of an element's border.

borderXOptionalResponsiveProp<BorderProperty<Length>>

Sets the width, line style, and color for an element's left and right borders.

borderYOptionalResponsiveProp<BorderProperty<Length>>

Sets the width, line style, and color for an element's top and bottom borders.

bottomOptionalResponsiveProp<BottomProperty<Length>>

Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.

boxShadowOptionalResponsiveProp<BoxShadowProperty>

Adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

displayOptionalResponsiveProp<DisplayProperty>

Defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.

flexOptionalResponsiveProp<FlexProperty<Length>>

Sets how a flex item will grow or shrink to fit the space available in its flex container. It is a shorthand for flexGrow, flexShrink, and flexBasis.

flexBasisOptionalResponsiveProp<FlexBasisProperty<Length>>

Sets the initial main size of a flex item.

flexDirectionOptionalResponsiveProp<FlexDirectionProperty>

Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

flexGrowOptionalResponsiveProp<GlobalsNumber>

Sets the flex grow factor of a flex item. If the size of flex items is smaller than the flex container, items grow to fit according to flexGrow.

flexShrinkOptionalResponsiveProp<GlobalsNumber>

Sets the flex shrink factor of a flex item. If the size of flex items is larger than the flex container, items shrink to fit according to flexShrink.

flexWrapOptionalResponsiveProp<FlexWrapProperty>

Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

fontFamilyOptionalResponsiveProp<FontFamilyProperty>

Specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

fontSizeOptionalResponsiveProp<FontSizeProperty<Length>>

Sets the size of the font. This property is also used to compute the size of em, ex, and other relative length units.

fontStyleOptionalResponsiveProp<FontStyleProperty>

Sets whether a font should be styled with a normal, italic, or oblique face.

fontWeightOptionalResponsiveProp<FontWeightProperty | string>

Specifies the weight (or boldness) of the font.

heightOptionalResponsiveProp<HeightProperty<Length>>

Specifies the height of an element.

justifyContentOptionalResponsiveProp<JustifyContentProperty>

Sets the alignment of flex items on the main axis of a flex container.

leftOptionalResponsiveProp<LeftProperty<Length>>

Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.

letterSpacingOptionalResponsiveProp<LetterSpacingProperty<Length> | string>

Sets the spacing behavior between text characters.

lineHeightOptionalResponsiveProp<LineHeightProperty<Length>>

Sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

marginOptionalResponsiveProp<MarginProperty<Length>>

Sets the margin area on all four sides of an element. It is a shorthand for marginTop, marginRight, marginBottom, and marginLeft.

marginBottomOptionalResponsiveProp<MarginBottomProperty<Length>>

Sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

marginLeftOptionalResponsiveProp<MarginLeftProperty<Length>>

Sets the margin area on the left of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

marginRightOptionalResponsiveProp<MarginRightProperty<Length>>

Sets the margin area on the right of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

marginTopOptionalResponsiveProp<MarginTopProperty<Length>>

Sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

marginXOptionalResponsiveProp<MarginProperty<Length>>

Sets the margin area on the left and right of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

marginYOptionalResponsiveProp<MarginProperty<Length>>

Sets the margin area on the top and bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

maxHeightOptionalResponsiveProp<MaxHeightProperty<Length>>

Sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for maxHeight.

maxWidthOptionalResponsiveProp<MaxWidthProperty<Length>>

Sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by maxWidth.

minHeightOptionalResponsiveProp<MinHeightProperty<Length>>

Sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for minHeight.

minWidthOptionalResponsiveProp<MinWidthProperty<Length>>

Sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for minWidth.

opacityOptionalResponsiveProp<GlobalsNumber | string>

Sets the transparency of an element or the degree to which content behind an element is visible.

orderOptionalResponsiveProp<GlobalsNumber>

Sets the order to lay out an item in a flex container. Items are sorted by ascending order value and then by their source code order.

overflowOptionalResponsiveProp<OverflowProperty>

Sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflowX and overflowY.

overflowXOptionalResponsiveProp<OverflowYProperty>

Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

overflowYOptionalResponsiveProp<OverflowXProperty>

Sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.

paddingOptionalResponsiveProp<PaddingProperty<Length>>

Sets the padding area on all four sides of an element. It is a shorthand for paddingTop, paddingRight, paddingBottom, and paddingLeft.

paddingBottomOptionalResponsiveProp<PaddingBottomProperty<Length>>

Sets the height of the padding area on the bottom side of an element.

paddingLeftOptionalResponsiveProp<PaddingLeftProperty<Length>>

Sets the width of the padding area on the left side of an element.

paddingRightOptionalResponsiveProp<PaddingRightProperty<Length>>

Sets the width of the padding area on the right side of an element.

paddingTopOptionalResponsiveProp<PaddingTopProperty<Length>>

Sets the height of the padding area on the top side of an element.

paddingXOptionalResponsiveProp<PaddingProperty<Length>>

Sets the width of the padding area on the left and right sides of an element.

paddingYOptionalResponsiveProp<PaddingProperty<Length>>

Sets the height of the padding area on the top and bottom sides of an element.

positionOptionalResponsiveProp<PositionProperty>

Sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

rightOptionalResponsiveProp<RightProperty<Length>>

Specifies the horizontal position of a positioned element. It has no effect on non-positioned elements.

textAlignOptionalResponsiveProp<TextAlignProperty>

Sets the horizontal alignment of the text.

textColorOptionalResponsiveProp<ColorProperty>

Sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.

textDecorationOptionalResponsiveProp<TextDecorationProperty>

Sets the appearance of decorative lines on text.

textTransformOptionalResponsiveProp<TextTransformProperty>

Specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

topOptionalResponsiveProp<TopProperty<Length>>

Specifies the vertical position of a positioned element. It has no effect on non-positioned elements.

widthOptionalResponsiveProp<WidthProperty<Length>>

Specifies the width of an element.

zIndexOptionalResponsiveProp<ZIndexProperty>

Sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with larger z-indexes cover those with smaller ones.